<template>
  <div class="liveBroadcast">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>直播管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 选择直播状态、搜索 -->
    <main>
      <div class="top">
        <li>
          <span>直播状态：</span>
          <!-- <select name="" id="">
            <option value=""></option>
            <option value="">直播中</option>
            <option value="">已结束</option>
          </select> -->
          <el-select
            v-model="filterType"
            placeholder="选择类型"
            @change="Change"
          >
            <!-- <el-option label="全部" value=""></el-option> -->
            <el-option
              v-for="(state, index) in statuses"
              :key="state"
              :label="state"
              :value="index"
            ></el-option>
          </el-select>
        </li>
        <li>
          <span>经纪人搜索：</span>
          <form action="">
            <!-- <input
              type="text"
              v-model="val"
              @keydown.enter="keyFn"
              placeholder="姓名、ID"
            /> -->
            <el-input
              v-model="val"
              placeholder="请输入搜索关键词"
              @blur="search"
            ></el-input>
          </form>
        </li>
        <li></li>
      </div>
      <div class="live">
        <h4>全部直播</h4>
        <!-- arr.length || show ? arr : live -->
        <div class="live-content">
          <dl v-for="(item, ind) in live" :key="ind">
            <dt>
              <img :src="item.image" alt="" />
            </dt>
            <dd>
              <h3 @click="goDetail(item.id)">{{ item.title }}</h3>
              <p>{{ item.name }} {{ item.time }}</p>
              <span>{{ item.live }} <i @click="deleFn(item.id)">删除</i></span>
            </dd>
          </dl>
        </div>
        <div class="block">
          <el-pagination
            background
            :current-page="pageIndex"
            :page-size="pageSize"
            @current-change="PageChange"
            layout="total, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      live: [],
      pageIndex: 1,
      pageSize: 10,
      ind: 0,
      bool: false,
      keyword: "",
      show: false,
      arr: [],
      val: "",
      total: 0, /// 总条数
      filterType: "",
      statuses: ["直播", "已结"],
    };
  },
  created() {
    this.$api.getLive().then((res) => {
      console.log(res, "live");
      this.live = res.data.data.data;
      /// 首次默认加载
      this.PageChange();
      /// 数据总条数
      this.total = res.data.data.total;
    });
  },
  methods: { ///判断直播状态
    Change() {
      console.log(this.filterType);
      if (this.filterType === 0) {
        // 直播
        this.$api.switchLive({ type: "直播" }).then((res) => {
          console.log(res.data);
          this.live = res.data.data;
          this.total = this.live.length;
          this.PageChange()
        })
      } else {
        // 已结
        this.$api.switchLive({ type: "已结" }).then((res) => {
          this.live = res.data.data;
          this.PageChange()
          this.total = this.live.length;
        });
      }
    },
    /// 模糊搜索
    search(e) {
      let title = e.target.value;
      this.$api.Search(title).then((res) => {
        console.log(res, "e");
        this.live = res.data;
        this.total = res.data.length;
      });
      if (title === "") {
        this.PageChange();
      }
    },
    /// 分页
    PageChange(e = 1, ind = this.ind) {
      this.pageIndex = e;
      this.bool = true;
      this.$api
        .getLive({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          keyword: this.keyword,
        })
        .then((res) => {
          if (this.ind !== ind) return;
          if (res.data.code === 1) {
            this.live = res.data.data.data;
          }
          this.bool = false;
        });
    },
    /// 按下显示搜索关键字的数据
    keyFn() {
      this.show = true;
      this.arr = this.live.filter((item) => {
        if (item.title.includes(this.val)) {
          return item;
        }
      });
    },
    /// 删除直播列表数据
    deleFn(id) {
      console.log(id, "id");
      this.$api.delLive(id).then((res) => {
        console.log(res, "delete");
        this.$message.success(res.data.message);
        this.$api.getLive().then((res) => {
          this.live = res.data.data.data;
        })
        /// 刷新页面
        this.PageChange();
      })
    },
    /// 跳转详情页
    goDetail(id) {
      this.$router.push(`/detail/${id}`);
    },
  },
};
</script>

<style lang='scss' scoped>
.liveBroadcast {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-breadcrumb {
    width: 100%;
    height: 30px;
    line-height: 30px;
  }
}
.top {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  li {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0 10px;
    span {
      width: 130px;
      text-align: center;
    }
    select,
    input {
      height: 30px;
      padding-left: 10px;
    }
  }
}
main {
  flex: 1;
  overflow-y: scroll;
}
.live {
  width: 100%;
  min-height: 450px;
  border-bottom: 1px solid #eee;
  .live-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    dl {
      flex-shrink: 0;
      width: 18%;
      margin: 8px 2px;
      height: 210px;
      img {
        width: 100%;
        height: 120px;
      }
      dd {
        p {
          display: flex;
          font-size: 14px;
        }
        span {
          color: #4ec5f5;
          display: flex;
          justify-content: space-between;
          padding: 0 5px;
          i {
            color: #f00;
            font-style: normal;
          }
        }
      }
    }
  }
}
.el-pagination {
  margin: 15px 0;
}
</style>